<template>
    <el-dialog @close="onClose" style="height: 700px;" :model-value="homeHotChooseDialogVisible" title="选择商品" width="50%"
        draggable>

        <div class="mt-4">
            <el-input v-model="adminSearchVal.keyword" placeholder="Please input" class="input-with-select">

                <template #append>
                    <el-button :icon="Search" @click="hdSearch" />
                </template>
            </el-input>
        </div>
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" />
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="productId" label="货号">
                No.
            </el-table-column>
            <el-table-column prop="deleteStatus" label="价格"></el-table-column>

        </el-table>
        <el-pagination v-model:current-page="paginationParams.pageNum" v-model:page-size="paginationParams.pageSize"
            :page-sizes="[5, 10, 15]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" :flashRuleForm="tableData" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import * as http from "@/request/http"
import useTable from '@/hooks/components/useTable'

import { ElMessageBox } from 'element-plus';
import { Search } from '@element-plus/icons-vue'

const adminSearchVal = reactive({
    keyword: ''
})
const { tableData, paginationParams, handleSizeChange, handleCurrentChange, queryList } = useTable(http.product.queryProductList, adminSearchVal)
withDefaults(defineProps<{
    homeHotChooseDialogVisible: boolean
}>(), {
    homeHotChooseDialogVisible: false
})

const multipleSelection = ref<IProductList[]>([])
let arrParams = ref<any>([])

const handleSelectionChange = (val: IProductList[]) => {
    multipleSelection.value = val
    arrParams = multipleSelection.value.map(item => {
        return { productId: item.id, productName: item.name }
    })
}

const emits = defineEmits<{
    (e: "cancel"): void
    (e: "confirm"): void
}>()

const onCancel = () => {
    emits("cancel")
}

const hdSearch = () => {
    queryList()
}


const onConfirm = () => {
    ElMessageBox.confirm(
        '是否提交数据 ? ',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            if (arrParams.length > 0) {
                http.homeHot.homeRecommendProductCreate(arrParams).then(_res => {
                    ElMessage.success("添加成功")
                    emits("confirm")
                })
            } else {
                ElMessage.warning('请选择条记录');
            }
        })
        .catch(() => {
            ElMessage.error('修改失败');
            emits("cancel")
        })
}

const onClose = () => {
    // ruleFormRef.value?.resetFields()
    emits("cancel")
}



</script>

<style scoped>
.input-with-select {
    width: 240px;
    margin-bottom: 20px;
}

.titleInput {
    width: 220px;
}
</style>